<template>
  <div>
    <div class="table-page-search-wrapper">
      <el-card>
        <el-form inline :model="queryParams" @submit.native.prevent>
          <el-row :gutter="48">
            <!-- 搜索item项 -->
            <el-col :md="8" :sm="24">
              <el-form-item label="角色名称" prop="roleName">
                <el-input
                  v-model.trim="queryParams.roleName"
                  placeholder="请输入角色名称"
                  clearable
                  @keyup.enter.native="handleSearch"
                />
              </el-form-item>
            </el-col>
            <el-col :md="8" :sm="24">
              <el-form-item label="角色key" prop="roleKey">
                <el-input
                  v-model.trim="queryParams.roleKey"
                  placeholder="请输入角色key"
                  clearable
                  @keyup.enter.native="handleSearch"
                />
              </el-form-item>
            </el-col>

            <!-- 查询按钮 -->
            <el-col :md="8" :sm="24">
              <el-form-item>
                <span
                  class="table-page-search-submitButtons"
                >
                  <el-button type="primary" @click="handleSearch">查 询</el-button>
                  <el-button style="margin-left: 8px" @click="resetQuery">重 置</el-button>
                </span>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
    </div>
    <div class="table-block">
      <el-card>
        <div slot="header" class="clearfix">
          <!-- 左侧修改新增按钮组 -->
          <div class="left">
            <el-button type="primary" @click="handleAdd('add',null)" v-if="menuButtonPermissions.includes('role:addRole')">新 增</el-button>
            <el-button type="primary" v-else style="visibility: hidden">新 增</el-button>

          </div>
          <!-- 右侧按钮组 -->
          <div class="right">
            <div class="table-operator card-right">
            </div>
          </div>
        </div>
        <!-- 表格数据列表 -->
        <el-table :data="tableList" stripe :height="tableMaxHeigth" row-key="id">
          <el-table-column prop="roleName" label="角色名称" align="center" show-overflow-tooltip/>
          <el-table-column prop="roleKey" label="角色key" align="center" >
          </el-table-column>
          <el-table-column prop="roleKey" label="角色类型" align="center" >
            <template slot-scope="scope">
              {{ scope.row.roleType == 1 ? '系统管理员' : '自定义' }}
            </template>
          </el-table-column>
          <el-table-column prop="createdAt" label="创建时间" align="center" >
            <template slot-scope="scope">
              {{ scope.row.createdAt | formatDate }}
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="100" v-if="menuButtonPermissions.includes('role:updRole') || menuButtonPermissions.includes('role:deleteRole')">
            <template #default="{ row }">
              <el-button
                type="text"
                icon="el-icon-edit"
                class="table-button-size"
                title="编辑"
                @click="handleAdd('update',row)"
                v-if="row.roleType !== 1 && menuButtonPermissions.includes('role:updRole')"></el-button>
              <el-button
                type="text"
                icon="el-icon-delete"
                class="table-button-size"
                title="删除"
                @click="handleDelete(row)"
                v-if="row.roleType !== 1 && menuButtonPermissions.includes('role:deleteRole')"></el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          :total="total"
          :page.sync="queryParams.pageNo"
          :limit.sync="queryParams.pageSize"
          @pagination="getTableList"
        />
      </el-card>
    </div>
    <edit ref="editRef" @getTableList="getTableList" :tableList="tableList"></edit>
  </div>
</template>

<script>
import edit from './edit.vue'
import actions from '@/cros/actions'

import { getList, deleteRole } from '@/api/roleManage'
export default {
  name: 'ResourceManage',
  components: {
    edit
  },
  data () {
    return {
      tableList: [],
      isAdvanced: false,
      statusList: [
        {
          id: 1,
          label: '启用'
        }, {
          id: 2,
          label: '停用'
        }
      ],
      // 查询参数
      queryParams: {
        roleName: '',
        roleKey: '',
        pageNo: 1,
        pageSize: 10
      },
      menuButtonPermissions: [],
      tableMaxHeigth: 0,
      total: 0
    }
  },
  mounted () {
    actions.onGlobalStateChange((state, prevState) => {
      this.menuButtonPermissions = state.menuButtonPermissions.map(v => v.buttonKey)
    }, true)
    this.getTableList()
     // 监听窗口大小变化事件
    window.addEventListener('resize', this.setTableHeight)
    // 初始化表格高度
    this.setTableHeight()
  },
  methods: {
    beforeDestroy () {
    // 组件销毁前移除事件监听
    window.removeEventListener('resize', this.setTableHeight)
    },
    setTableHeight () {
      this.$nextTick(() => {
        this.tableMaxHeigth = document.body.offsetHeight - 325
      })
    },
    getResType (type) {
      switch (type) {
        case 1:
         return '目录'
      case 2:
         return '菜单'
          case 3:
         return '按钮'
          case 4:
        return '外链'
          case 5:
         return 'iFrame'
        default:
          break
      }
    },
    handleDelete (row) {
      console.log(row, 'rowssssss')
       this.$confirm(`是否删除角色名称为 '${row.roleName}' 的数据项?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
       }).then(() => {
         deleteRole({ id: row.id }).then((res) => {
           if (res.code === 'success') {
            this.$message.success('操作成功')
           this.getTableList()
           } else {
            this.$message.error(res.msg)
          }
         })
        }).catch(() => {
          console.log('取消删除')
        })
    },
    handleSearch () {
      this.queryParams.pageNo = 1
      this.getTableList()
    },
    // 获取列表数据
    async getTableList () {
      const res = await getList(this.queryParams)
      this.tableList = res.data.list
      this.total = res.data.totalCount
    },
    // 重置
    resetQuery () {
      this.queryParams.roleName = ''
      this.queryParams.roleKey = ''
      this.queryParams.pageNo = 1
      this.getTableList()
    },
    // 新增 / 编辑
    handleAdd (str, row) {
      this.$refs.editRef.open(str, row)
    }
  }
}
</script>
<style scoped lang="scss">
.dataCount{
  cursor: pointer;
}
</style>
